<template>
  <div>
    <el-drawer
      v-model="drawer"
      :size="650"
      :title="translate('流程审批')"
      :with-header="true"
      @close="handleClose"
    >
      <el-tabs v-model="activeName">
        <el-tab-pane :label="translate('节点审批')" name="first">
          <div>
            <el-row>
              <el-col :span="24">
                <div class="title">{{ translate('当前节点') }}</div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <div class="nodelist">
                  <span>{{ translate('节点名称') }}：</span>
                  <span>{{ currentnodeList.inputname }}</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="nodelist">
                  <span>{{ translate('审核人员') }}：</span>
                  <span>{{ filters(currentnodeList) }}</span>
                </div>
              </el-col>
            </el-row>
            <el-row v-if="currentnodeList.type !== 'start'" class="nodelist">
              <el-col :span="24">
                <span>{{ translate('审核结果') }}：</span>
                <el-radio
                  v-model="radio"
                  :disabled="currentnodeList.logList"
                  label="pass"
                >
                  {{ translate('通过') }}
                </el-radio>
                <el-radio
                  v-model="radio"
                  :disabled="currentnodeList.logList"
                  label="back"
                >
                  {{ translate('退回') }}
                </el-radio>
              </el-col>
            </el-row>
            <!-- <el-row v-if="currentnodeList.type !== 'start'" class="nodelist">
          <span>审批意见：</span>
          <el-col :span="18">
            <el-input
              v-model="textarea"
              placeholder="请输入内容"
              :rows="2"
              type="textarea"
            />
          </el-col>
        </el-row> -->
            <el-row
              v-if="
                currentnodeList.node != 'end' &&
                currentnodeList.inputname != '部门领导'
              "
            >
              <el-col :span="24">
                <div class="title">{{ translate('下一节点') }}</div>
              </el-col>
            </el-row>
            <el-row
              v-if="
                currentnodeList.node != 'end' &&
                currentnodeList.inputname != '部门领导'
              "
            >
              <el-col :span="12">
                <div class="nodelist">
                  <span>{{ translate('节点名称') }}：</span>
                  <span>{{ nextnodeList.inputname }}</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="nodelist">
                  <span class="ver-top">{{ translate('审批人员') }}：</span>
                  <span
                    class="nodename hovers"
                    :data-title="filters(nextnodeList)"
                  >
                    {{ filters(nextnodeList) }}
                  </span>
                  <el-button
                    size="small"
                    type="primary"
                    @click="dialogVisible = true"
                  >
                    {{ translate('选择人员') }}
                  </el-button>
                </div>
              </el-col>
            </el-row>
            <el-row
              class="nodelist"
            >
              <span>{{ translate('审批意见') }}：</span>
              <el-col :span="18">
                <el-input
                  v-model="Opinion"
                  :placeholder="translate('请输入内容')"
                  :rows="2"
                  type="textarea"
                />
              </el-col>
            </el-row>
          </div>
          <div v-if="status != 2" class="demo-drawer__footer drawerbottom">
            <el-button @click="handleClose">{{ translate('取消') }}</el-button>
            <el-button type="primary" @click="submitFn" :disabled="istrue">
              {{ translate('确定') }}
            </el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="translate('审核流程')" name="second">
          <div>
            <Workflow :flow-data="flowData" />
          </div>
        </el-tab-pane>
        <el-tab-pane :label="translate('审核记录')" name="third">
          <div>
            <Record :record-data="recordData" />
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-drawer>
    <el-dialog
      v-model="dialogVisible"
      :modal="false"
      :title="translate('人员列表')"
      width="25%"
    >
      <chosemen @closefn="dialogVisible = false" @on-surefn="onSureFn" />
    </el-dialog>
  </div>
</template>
<script>
  import {
    excuteflow,
    getinstance,
    IncomeBillExamine,
    auditwms,
    GetFlowLogList,
    ItemPlanData,
    pickingbillOutItem,
  } from '@/api/form'
  import chosemen from './choosemen'
  import Workflow from '@/views/vab/detail/components/workflow/flow.vue'
  import Record from '@/views/vab/detail/components/workflow/record.vue'
  import { translate } from '@/i18n'
  export default defineComponent({
    name: 'Arrival',
    components: { chosemen, Workflow, Record },
    props: {
      drawershow: {
        type: Boolean,
        default: false,
      },
      formid: {
        type: String,
        default: '',
      },
      formcode: {
        type: String,
        default: '',
      },
    },
    emits: ['handclose','submitfn'],
    data() {
      return {
        activeName: 'first',
        drawer: this.drawershow,
        radio: 'pass',
        dialogVisible: false,
        currentnodeList: {},
        nextnodeList: {},
        logList: {},
        username: '',
        userid: '',
        Opinion: '',
        flowData: {},
        recordData: [],
        nodelist: {},
        status: 2,
        istrue: false,
      }
    },
    watch: {
      drawershow(val) {
        this.drawer = this.drawershow
        if (this.drawer) {
          this.init()
        }
      },
    },
    methods: {
      init() {
        this.auditwms()
      },
      translate(row) {
        return translate(row)
      },
      async auditwms() {
        const params = {
          code: this.formcode,
          keyValue: this.formid,
        }
        const data = await auditwms(params)
        if (data.code === '200') {
          this.nodelist = data.data
          this.currentnodeList = data.data.currentNode
          this.nextnodeList = data.data.nexNodeList
          this.logList = data.data.logList
          this.flowData = JSON.parse(data.data.workFlowEntity.flowData) || {}
          const { Data: recordData } = await GetFlowLogList({
            instanceId: data.data.instance.id,
            formId: this.formid,
          })
          this.recordData = recordData.data
          this.getinstances()
          console.log(recordData)
        } else {
          this.$message({
            message: data.message,
            type: 'error',
          })
        }
      },
      filters(val) {
        if (
          val.properties &&
          val.properties.member &&
          val.properties.member.length > 0
        ) {
          const rename = []
          val.properties.member.map((item) => {
            rename.push(item.realName || item.RealName)
          })
          return rename.join(',')
        } else {
          return val.nodeName
        }
      },
      handleClose(done) {
        this.drawer = false
        this.$emit('handclose', false)
      },
      onSureFn(val) {
        console.log(val)
        if (val && val.length > 0) {
          const userids = []
          const usernames = []
          val.map((item) => {
            userids.push(item.UserId)
            usernames.push(item.RealName)
          })
          this.username = usernames.join(',')
          this.userid = userids.join(',')
          this.nextnodeList.nodeName = this.username
          this.nextnodeList.properties.member = val
          this.filters(this.nextnodeList)
        }
        this.dialogVisible = false
      },
      submitFn() {
        this.istrue = true
        this.excuteflows()
      },
      async IncomeBillExamines() {
        const params = {
          code: this.nodelist.workFlowEntity.code,
          formId: this.formid,
        }
        if (this.nodelist.workFlowEntity.code === 'Wms_IncomeBillMaster') {
          const data = await IncomeBillExamine(params)
        } else if (
          this.nodelist.workFlowEntity.code === 'Wms_ItemPlanBillMaster'
        ) {
          const data = await ItemPlanData(params)
        } else if (
          this.nodelist.workFlowEntity.code === 'Wms_PickingBillMaster'
        ) {
          const data = await pickingbillOutItem(params)
        }
      },
      async getinstances() {
        const params = {
          code: this.nodelist.workFlowEntity.code,
          formId: this.formid,
        }
        const data = await getinstance(params)
        if (data.code === '200') {
          this.status = data.data?.data?.status
          if (data.data?.data?.status === 2) {
            this.IncomeBillExamines()
          }
        }
      },
      async excuteflows() {
        console.log(this.userid)
        console.log(this.nextnodeList)
        if(this.nextnodeList) {
          if(this.nextnodeList?.properties?.member.length>0) {
            const renamearr = []
            const renIdarr = []
            this.nextnodeList?.properties?.member.map((item) =>{
              renamearr.push(item.realName || item.RealName)
              renIdarr.push(item.userId || item.UserId)
            })
            this.username = renamearr.join(',')
            this.userid = renIdarr.join(',')
          }
        }
        console.log(this.username)
        const params = {
          code: this.nodelist.workFlowEntity.code,
          formId: this.formid,
          operateType:
            this.currentnodeList.type === 'start' ? 'start' : this.radio,
          setInfo: {
            userId: this.userid
              ? this.userid
              : this.nextnodeList?.properties?.member[0]?.userId,
            realName: this.username
              ? this.username
              : this.nextnodeList?.properties?.member[0]?.realName,
          },
          nextNodeId: this.currentnodeList.current,
          Opinion: this.Opinion,
        }
        const data = await excuteflow(params)
        if (data.code === '200') {
          this.getinstances()
          this.$message({
            message: translate('提交成功'),
            type: 'success',
          })
          this.$emit('submitfn', false)
        }
        this.istrue = false
      },
    },
  })
</script>
<style lang="scss" scoped>
  .title {
    font-size: 16px;
    color: #000;
    font-weight: 600;
    padding-bottom: 20px;
  }
  .nodelist {
    padding-bottom: 20px;

    .nodename {
      display: inline-block;
      width: 100px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
    }
    .ver-top {
      vertical-align: top;
    }
    .hovers:hover::after {
      position: absolute;
      top: -20px;
      right: 100px;
      content: attr(data-title);
      color: #909399;
      border-radius: 5px;
      background-color: rgba(255, 255, 255, 0.6);
    }
  }
  .drawerbottom {
    position: fixed;
    bottom: 20px;
  }

  ::v-deep .el-tabs__content {
    padding-bottom: 10px;
  }
</style>
